import React, {Component,} from 'react'
import Admin from "../../../layout/Admin";
import FeedbackModel from "../../../model/feedback";
import {Button, Form, Input, Modal, PageHeader, Popover, Table} from "antd";
import {LeftOutlined, RightOutlined,} from '@ant-design/icons';
import Info from "../../../service/info";


class Feedback extends Component {

    constructor(props) {
        super(props)
        this.feedbackModel = new FeedbackModel()
        this.state = {
            p: 0,
            feedbackList: [],
            feedback: {},
            modal: {
                'reply': false,
            },
            replayForm: {
                id: 0,
                uid: '',
                title: '',
                reply: '',
            }
        }
    }

    componentDidMount() {
        this.all()
    }

    all = () => {
        let p = this.state.p
        let f = this.feedbackModel

        f.all({p,})
            .then(data => {
                const feedbackList = data.data.ok
                feedbackList.forEach((p, i) => p.key = (i + 1).toString())
                this.setState({
                    feedbackList,
                })
            })
    }

    reply = (payload) => {
        return this.feedbackModel
            .reply(payload)
    }

    prevPage = () => {
        const p = this.state.p - 1
        this.fetchPage(p)
    }

    fetchPage = (p) => {
        this.setState({
            p,
        }, () => {
            this.all()
        })
    }

    nextPage = () => {
        const p = this.state.p + 1
        this.fetchPage(p)
    }

    modalShow = (key) => {
        this.setState({
            modal: {
                [key]: true,
            }
        })
    }

    modalCancel = (key) => {
        this.setState({
            modal: {
                [key]: false,
            }
        })
    }

    emptyReplyForm = () => {
        this.form.resetFields()
    }

    replayFeedback = feedback => {
        this.setState({
            feedback,
        }, () => {
            this.modalShow('reply')
        })
    }

    onReplayFinish = params => {
        const feedback = this.state.feedback
        const id = feedback.Id
        const uid = feedback.Uid
        const payload = {
            ...params,
            id,
            uid,
            replytitle: feedback.Title,
        }
        this.reply(payload).then(resp => {
            if (resp.data.ok === 1) {
                Info.success('发帖成功')
                return true
            }
            if (resp.data.err) {
                Info.error(resp.data.data)
                return false
            }
        })
            .then(result => {
                if (result) {
                    this.emptyReplyForm()
                    this.modalCancel('reply')
                }
            })
    }

    render() {

        //
        // Contact: ""
        // Createt: 1589868080
        // Id: 295
        // Img: ""
        // Reply: ""
        // Style: 4
        // Title: "啊啊"
        // Txt: "测试"
        // Uid: "c95f7de8-4d02-4395-b351-705a7b8a420e"
        const StyleRender = (text) => {
            return text
        }

        const ImgRender = (img, record) => {
            const content = <img src={img} alt=''/>
            return (
                <Popover
                    content={content}
                    title="图片详情"
                    trigger="click"
                >
                    <img src={img} alt='' style={{width: '50px'}}/>
                </Popover>
            )
        }

        const actionRender = (text, record) => {
            return <div>


                <a
                    onClick={() => this.replayFeedback(record)}
                >
                    <span>回复</span>
                </a>

            </div>
        }

        const columns = [

            {
                title: 'Id',
                dataIndex: 'Id',
                render: (text) => <span>{text}</span>
            },
            {
                title: '类型',
                dataIndex: 'Style',
                render: StyleRender
            },
            {
                title: '标题',
                dataIndex: 'Title',
                render: (Title,) => <span>{Title}</span>,
            },
            {
                title: '内容描述',
                dataIndex: 'Txt',
                render: (Txt,) => <span>{Txt}</span>,
            },
            {
                title: '联系方式',
                dataIndex: 'Contact',
                render: (text, record) => <span>{text}</span>,
                // editable: true
            },
            {
                title: '图',
                dataIndex: 'Img',
                render: ImgRender,
            },
            {
                title: '操作',
                dataIndex: '操作',
                render: actionRender,
            },
        ]

        const header = <div style={{background: '#fff'}}>
            <PageHeader title='反馈记录'/>
        </div>

        const footer = <div style={{
            paddingTop: 8,
            display: "flex",
            justifyContent: "flex-end",
        }}>
            <Button
                style={{marginRight: 8,}}
                onClick={(e) => this.prevPage()}
            ><LeftOutlined /></Button>
            <a className='ant-pagination-item ant-pagination-item-active '>{this.state.p + 1}</a>
            <Button
                onClick={(e) => this.nextPage()}
            ><RightOutlined /></Button>
        </div>

        const table = <div className='list-container'>

            <Table
                dataSource={this.state.feedbackList}
                columns={columns}
                pagination={false}
                // rowKey={(record, index) => index}
            />

            {footer}

        </div>

        const layout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 16 },
        }

        const replyModal = <Modal
            title="回复"
            visible={this.state.modal.reply}
            style={{width: '100%',}}
            footer={null}
            maskClosable={true}
            onCancel={() => this.modalCancel('addVip')}
        >
            <Form
                {...layout}
                ref={el => this.form = el}
                initialValues={this.state.replayForm}
                onFinish={this.onReplayFinish}
            >
                <Form.Item
                    label="标题"
                    name="title"
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label="内容"
                    name="reply"
                >
                    <Input.TextArea />
                </Form.Item>
                <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 6 }}>

                    <Button onClick={() => this.modalCancel('reply')}  style={{marginRight: '8px',}}>
                        取消
                    </Button>

                    <Button type="primary" htmlType="submit">
                        添加
                    </Button>

                </Form.Item>
            </Form>
        </Modal>

        return <>
            {replyModal}
            <Admin>
                {header}
                {table}
            </Admin>
        </>

    }


}

export default Feedback
